<script setup lang="ts">
// 获取GSAP实例
const { $gsap, $ScrollTrigger } = useNuxtApp()

const hero = ref<HTMLElement | null>(null)
const heroText = ref<HTMLElement | null>(null)
const heroSubText = ref<HTMLElement | null>(null)
const thirdScreenTitle = ref<HTMLElement | null>(null)
const thirdScreenList = ref<HTMLElement | null>(null)

onMounted(() => {
  if (!import.meta.client) return

  // 设置初始状态
  $gsap.set([hero.value, heroText.value, heroSubText.value], {
    opacity: 0,
    y: 30,
  })

  // 设置第三屏元素的初始状态
  $gsap.set([thirdScreenTitle.value, thirdScreenList.value], {
    opacity: 0,
    y: 50,
  })

  const heroTl = $gsap.timeline()
  heroTl
    .to(hero.value, { opacity: 1, y: 0, duration: 1, ease: 'power2.out' })
    .to(heroText.value, { opacity: 1, y: 0, duration: 1, ease: 'power2.out' }, '-=0.5')
    .to(heroSubText.value, { opacity: 1, y: 0, duration: 1, ease: 'power2.out' }, '-=0.5')

  // 为标题创建ScrollTrigger
  const titleScrollTrigger = $ScrollTrigger.create({
    trigger: thirdScreenTitle.value, // 以标题作为触发点
    start: 'top 80%', // 当标题进入视口80%位置时触发
    markers: true, // 显示标记（调试用）
    onEnter: () => {
      // 标题入场动画
      $gsap.to(thirdScreenTitle.value, {
        opacity: 1,
        y: 0,
        duration: 0.8,
        ease: 'power3.out',
      })
    },
    onLeaveBack: () => {
      // 标题退场动画
      $gsap.to(thirdScreenTitle.value, {
        opacity: 0,
        y: 50,
        duration: 0.6,
        ease: 'power3.out',
      })
    },
  })

  // 为列表创建ScrollTrigger
  const listScrollTrigger = $ScrollTrigger.create({
    trigger: thirdScreenList.value, // 以列表作为触发点
    start: 'top 85%', // 当列表进入视口85%位置时触发
    markers: true, // 显示标记（调试用）
    onEnter: () => {
      // 列表入场动画
      $gsap.to(thirdScreenList.value, {
        opacity: 1,
        y: 0,
        duration: 0.8,
        ease: 'power3.out',
      })
    },
    onLeaveBack: () => {
      // 列表退场动画
      $gsap.to(thirdScreenList.value, {
        opacity: 0,
        y: 50,
        duration: 0.6,
        ease: 'power3.out',
      })
    },
  })

  onUnmounted(() => {
    heroTl.kill() // 清除 GSAP 时间线
    titleScrollTrigger.kill() // 清除标题ScrollTrigger实例
    listScrollTrigger.kill() // 清除列表ScrollTrigger实例
  })
})
</script>

<template>
  <div class="content">
    <div class="main magic-os">
      <!-- 第一屏 -->
      <section class="flex h-screen items-center justify-center bg-black text-white">
        <div class="relative w-[824px]">
          <img
            ref="hero"
            class="h-[824px] w-[801px] translate-y-8 transform opacity-0"
            src="~/assets/images/kv.png"
            alt=""
          />
          <div class="absolute bottom-8 w-full text-center">
            <img
              ref="heroText"
              class="inline-block translate-y-8 transform opacity-0"
              src="~/assets/images/magic-os-light.svg"
              alt=""
            />
            <h2 ref="heroSubText" class="mt-5 translate-y-8 transform text-2xl opacity-0">
              越用越好用 越用越懂你
            </h2>
          </div>
        </div>
      </section>
      <!-- 第二屏 -->
      <section>
        <video autoplay loop muted playsinline webkit-playsinline class="w-full">
          <source type="video/mp4" src="~/assets/images/tvc-glance.mp4" />
        </video>
      </section>
      <!-- 第三屏 -->
      <section class="flex h-[calc(100vh-60px)] items-center justify-center bg-white">
        <div class="text-center">
          <h2 ref="thirdScreenTitle" class="mb-40 text-5xl font-bold">4大技术加持 共筑新体验</h2>
          <div ref="thirdScreenList" class="grid grid-cols-4 gap-40">
            <div>
              <img class="inline-block" src="~/assets/images/icon-magic-ring.svg" alt="" />
              <h3 class="mb-1.5 text-2xl text-black">MagicRing 信任环</h3>
              <p class="text-sm text-neutral-400">跨系统可信互联</p>
            </div>
            <div>
              <img class="inline-block" src="~/assets/images/icon-magic-ring.svg" alt="" />
              <h3 class="mb-1.5 text-2xl text-black">Magic Live 智慧引擎</h3>
              <p class="text-sm text-neutral-400">平台级AI能力</p>
            </div>
            <div>
              <img class="inline-block" src="~/assets/images/icon-magic-ring.svg" alt="" />
              <h3 class="mb-1.5 text-2xl text-black">Turbo X 系统引擎</h3>
              <p class="text-sm text-neutral-400">内核级底层性能增强</p>
            </div>
            <div>
              <img class="inline-block" src="~/assets/images/icon-magic-ring.svg" alt="" />
              <h3 class="mb-1.5 text-2xl text-black">MagicGuard 荣耀安全</h3>
              <p class="text-sm text-neutral-400">三重安全防护体系</p>
            </div>
          </div>
        </div>
      </section>
      <!-- 第四屏 -->
      <section ref="magicRing" class="section-magic-ring section-start">
        <div class="sticky-wrapper">
          <div class="sticky-content section-row">
            <div ref="magicRingWrap" class="section-wrapper">
              <svg
                ref="magicRingSvg"
                class="w-36"
                width="162px"
                height="146px"
                viewBox="0 0 162 146"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g transform="translate(-1536.000000, -479.000000)">
                    <g transform="translate(1542.400000, 483.800000)">
                      <ellipse
                        class="magic-path"
                        stroke="#000000"
                        stroke-width="8"
                        stroke-dasharray="0 220% 0"
                        transform="translate(74.844732, 68.400000) rotate(-240.000000) translate(-74.844732, -68.400000) "
                        cx="74.8447318"
                        cy="68.4"
                        rx="31.5406825"
                        ry="68.2132305"
                      ></ellipse>
                      <ellipse
                        class="magic-path"
                        stroke="#000000"
                        stroke-width="8"
                        stroke-dasharray="0 220% 0"
                        cx="74.8447318"
                        cy="68.4"
                        rx="31.4542843"
                        ry="68.4"
                      ></ellipse>
                      <ellipse
                        class="magic-path"
                        stroke="#000000"
                        stroke-width="8"
                        stroke-dasharray="0 220% 0"
                        transform="translate(74.844732, 68.400000) rotate(-300.000000) translate(-74.844732, -68.400000) "
                        cx="74.8447318"
                        cy="68.4"
                        rx="31.5406825"
                        ry="68.2132305"
                      ></ellipse>
                      <ellipse
                        ref="magicRingCircle"
                        class="magic-circle"
                        fill="#D7A85B"
                        cx="74.8447318"
                        cy="68.4"
                        rx="10.4847614"
                        ry="10.5230769"
                        opacity="0"
                      ></ellipse>
                    </g>
                  </g>
                </g>
              </svg>

              <h2 ref="magicRingHeadline" class="section-headline will-show">MagicRing 信任环</h2>
              <p ref="magicRingSub" class="section-subhead will-show">智慧互联 再无界</p>
              <div ref="magicRingLink" class="section-link will-fadein">
                <a class="section-intro" href="">查看智慧互联产品适配列表</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<style scoped></style>
